<template>
  <div class="building-total chart-box1">
    <div class="chart-title">楼宇数据</div>
    <div class="chart-content">
      <div class="content-list datav-scroller-bar">
        <a-row :gutter="12">
          <a-col :span="24">
            <div class="tenant-item-line">
              <div class="tenant-item-name">
                <cu-icon type="org-zuyongbeifen" class="icon"></cu-icon>
                在租面积
              </div>
              <div class="number">
                <count-to
                  :start-val="data.leaseArea.oldVal"
                  :end-val="data.leaseArea.newVal"
                  :duration="3000"
                />
                <span class="suffix">㎡</span>
              </div>
            </div>
          </a-col>
          <a-col :span="24">
            <div class="tenant-item-line">
              <div class="tenant-item-name">
                <cu-icon type="org-shigongmianji" class="icon"></cu-icon>
                管理面积
              </div>
              <div class="number">
                <count-to
                  :start-val="data.totalManageArea.oldVal"
                  :end-val="data.totalManageArea.newVal"
                  :duration="3000"
                />
                <span class="suffix">㎡</span>
              </div>
            </div>
          </a-col>
          <a-col :span="24">
            <div class="tenant-item-line">
              <div class="tenant-item-name">
                <cu-icon type="org-zhaoshangguihua" class="icon"></cu-icon>
                空置招商面积
              </div>
              <div class="number">
                <count-to
                  :start-val="data.totalVacantArea.oldVal"
                  :end-val="data.totalVacantArea.newVal"
                  :duration="3000"
                />
                <span class="suffix">㎡</span>
              </div>
            </div>
          </a-col>
          <a-col :span="24">
            <div class="tenant-item-line">
              <div class="tenant-item-name">
                <cu-icon type="org-chuzujunjia" class="icon"></cu-icon>
                在租实时均价
              </div>
              <div class="number">
                <count-to
                  :start-val="data.rentAvgPrice.oldVal"
                  :end-val="data.rentAvgPrice.newVal"
                  :duration="3000"
                />
                <span class="suffix">㎡</span>
              </div>
            </div>
          </a-col>
          <a-col :span="24">
            <div class="tenant-item-line">
              <div class="tenant-item-name">
                <cu-icon type="org-benyueshouyi" class="icon"></cu-icon>
                本月签合面积
              </div>
              <div class="number">
                <count-to
                  :start-val="data.monthLeaseAreas.oldVal"
                  :end-val="data.monthLeaseAreas.newVal"
                  :duration="3000"
                />
                <span class="suffix">㎡</span>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, onMounted, reactive, toRefs, watch } from "vue";
import { Decoration9 } from "@kjgl77/datav-vue3";
import CountTo from "../countTo/index.vue";
import common from "../../utils/common";
import store from "../../../../store";

export default defineComponent({
  name: "BuildingTotal",
  components: { CountTo },
  setup(props) {
    const state = reactive({
      data: {
        // 在租面积
        leaseArea: { ...common.countToInit },
        // 管理面积
        totalManageArea: { ...common.countToInit },
        // 空置招商面积
        totalVacantArea: { ...common.countToInit },
        // 在租实时均价
        rentAvgPrice: { ...common.countToInit },
        // 本月签合面积
        monthLeaseAreas: { ...common.countToInit },
      },
    });

    watch(
      () => store.getters.synthetical.BuildingTotal,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { BuildingTotal } = store.getters.synthetical;
      if (BuildingTotal) {
        for (let key in BuildingTotal) {
          if (state.data[key]) {
            let newItem = {
              oldVal: state.data[key]["newVal"],
              newVal: Number(BuildingTotal[key]),
            };
            state.data[key] = { ...newItem };
          }
        }
      }
    };

    const init = () => {
      getData();
    };

    init();

    return {
      ...toRefs(state),
    };
  },
});
</script>
<style lang="less" scoped>
@import "../../styles/common.less";
.building-total {
  .chart-content {
    display: flex;
    padding-top: 2rem;
    padding-bottom: 2rem;

    .content-list {
      flex: 1;
      overflow: hidden auto;
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .ant-col {
      &:last-child {
        .tenant-item-line {
          border-bottom: none;
        }
      }
    }

    .tenant-item-line {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 0.1rem solid @whiteBorder;
      height: 6rem;
      padding: 0 0.2rem;

      .tenant-item-name {
        display: flex;
        align-items: center;

        .icon {
          font-size: 1.8rem;
          margin-right: 0.3rem;
        }
      }

      .number {
        color: #f6bd16;
        font-size: 2.4rem;

        .suffix {
          font-size: 1.4rem;
          margin-left: 0.5rem;
        }
      }
    }
  }
}
</style>
